<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/26
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>收货地址管理</title>
    <link rel="stylesheet" href="${ctx}/static/front/css/reset.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/top.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/deliverAddress.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/footer.css"/>
    <link rel="stylesheet" href="${ctx}/static/front/css/font-awesome-4.7.0/Font-Awesome-master/css/font-awesome.min.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<!--头部-->
<div class="top" id="top">
    <!--头部bar-->
    <div class="top-bar">
        <div class="w1230 top-main">
            <a href="${ctx}/front/frontUser/goindex" class="toIndex">
                <i class="fa fa-home"></i>
                <span>爱购网首页</span>
            </a>
            <div class="account">
                <span>${frontUser.username}<i class="fa fa-caret-down"></i></span>
                <div class="manage">
                    <ul>
                        <li><a href="${ctx}/front/address/goDeliverAddress">收货地址</a></li>
                        <li><a href="${ctx}/front/cart/goBuyerTrade">购物车</a></li>
                        <li><a href="${ctx}/orders/goBuyerTrade">我的订单</a></li>
                        <li><a href="${ctx}/front/frontUser/frontLogOut">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="w1230">
    <img src="${ctx}/static/front/img/logo.png" width="100" height="40" class="logo"/>
    <span class="cart">收货地址</span>
</div>
<!--编辑收货地址-->
<div class="w1230">
    <h3 class="add-title">新增收货地址</h3>
    <div class="add-address">
        <form action="" method="post" id="form">
            <input type="hidden" id="id" name="id" value="${updateAddress.id}"/>
            <div class="add-area">
                <label>地址信息：</label>
                <div id="area"></div>
            </div>
            <p>
                <label>详细地址：</label>
                <textarea placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" class="add-detail" name="detailedadd">${updateAddress.detailedadd}</textarea>
                <p style='font-size: 16px;color: red;margin-left: 140px' id="isDetailedadd">请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息</p>
            </p>


            <p>
                <label>收货人姓名：</label>
                <input type="text" class="add-name" placeholder="请输入收货人姓名" name="consignee" value="${updateAddress.consignee}"/>
                <p style='font-size: 16px;color: red;margin-left: 140px' id="isConsignee" >请输入收货人姓名</p>
            </p>
            <p>
                <label>手机号码：</label>
                <input type="text" class="add-tel" placeholder="请输入收货人手机号" name="tel" value="${updateAddress.tel}"/>
                <p style='font-size: 16px;color: red;margin-left: 140px' id="isTel" >请输入正确收货人手机号</p>
            </p>
            <p class="chk-address">
                <input type="checkbox" name="defaultadd"/>
                <span>设置为默认收货地址</span>
            </p>
            <input type="submit" value="保存" class="save-btn"/>
        </form>
    </div>
</div>
<!--收货地址列表-->
<div class="add-list w1230">
    <p class="message"><i class="fa fa-exclamation-circle"></i>只能保存5个地址</p>
    <table class="table-list">
        <tr>
            <th class="t-name">收货人</th>
            <th class="t-address">收货地址</th>
            <th class="t-tel">手机号</th>
            <th class="t-operate">操作</th>
            <th class="t-default"></th>
        </tr>
        <c:forEach items="${addresses}" var="address">
            <tr>
                <td>${address.consignee}</td>
                <td>${address.province}${address.city}${address.district}${address.detailedadd}</td>
                <td>${address.tel}</td>
                <td><a href="${ctx}/front/address/updateAddress/${address.id}">修改</a>|<a href="${ctx}/front/address/deleteAddress/${address.id}">删除</a></td>
                <c:if test="${address.defaultadd==1}"><td class="default-on">默认地址</td></c:if>
                <c:if test="${address.defaultadd==0}"><td ><a href="${ctx}/front/address/setDefaultadd/${address.id}">设为默认</a></td></c:if>
            </tr>
        </c:forEach>
    </table>
</div>
<!--脚注-->
<div class="footer">
    <p class="w1230">
        <a href="#">关于爱购</a>
        <a href="#">合作伙伴</a>
        <a href="#">营销中心</a>
        <a href="#">廉正举报</a>
        <a href="#">联系客服</a>
        <a href="#">开发平台</a>
        <a href="#">诚征英才</a>
        <a href="#">联系我们</a>
        <a href="#">网站地图</a>
        <a href="#">知识产权</a><span>|</span>
        <span>&copy;2018-2020 igo.com 版权所有</span>
    </p>
</div>
<script src="${ctx}/static/front/js/area.js"></script>

<script>
    $(function () {

        //判断修改地址是否为空
        if(${updateAddress!=null}){
            //设置省
            $("select[name='province']").val('${updateAddress.province}').trigger("change");
            //设置市
            $("select[name='city']").val('${updateAddress.city}').trigger("change");
            //设置区
            $("select[name='district']").val('${updateAddress.district}').trigger("change");
            //判断是否是默认地址
            if(${updateAddress.defaultadd==1}){
                $("input[name='defaultadd']").attr("checked","checked");
            }
        }

        //先将详细地址提示隐藏
        $("#isDetailedadd").hide();
        //当获取地址详情焦点时将详细地址提示隐藏
        $("textarea").on("focus",function () {
            $("#isDetailedadd").hide();
        })

        //先将收货人提示隐藏
        $("#isConsignee").hide();
        //当获收货人焦点时将收货人提示隐藏
        $("input[name='consignee']").on("focus",function () {
            $("#isConsignee").hide();
        })

        //先将电话提示隐藏
        $("#isTel").hide();
        //当获电话焦点时将电话提示隐藏
        $("input[name='tel']").on("focus",function () {
            $("#isTel").hide();
        })

        //表单提交
        $('#form').on("submit",function () {
            var id = $("#id").val();
            var province  = $("select[name='province']").val();
            var city = $("select[name='city']").val();
            var district = $("select[name='district']").val();
            var detailedadd = $("textarea").val();
            var consignee = $("input[name='consignee']").val();
            var tel = $("input[name='tel']").val();
            var defaultadd = $("input[name = 'defaultadd']").val();
            if(defaultadd!=null){
                defaultadd = 1;
            }else{
                defaultadd = 0;
            }

            //判断是否已提示，已提示直接返回
            if($("#area>p").length!=0){
                return false;
            }
            //判断地址信息是否选择，没选择提示
            if (province==-1 || city==-1 || district == -1 ){
                $("#area").append("<p style='font-size: 16px;color: red;margin-left: 60px'>地址信息不能为空</p>")
                return false;
            }

            //判断详细地址是否填写，没填写将提示显示
            if(detailedadd==null || detailedadd==""){
                $("#isDetailedadd").show();
                return false;
            }

            //判断收货人姓名是否填写，没有填写将提示显示
            if(consignee == null || consignee==""){
                $("#isConsignee").show();
                return  false;
            }

            //判断电话是否填写，没有填写将提示显示
            if(tel == null || tel ==""){
                $("#isTel").show()
                return false;
            }

            //判断电话是否正确
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(tel)) {
                $("#isTel").show()
                return false;
            }

            $.post("${ctx}/front/address/addDeliverAddress",
                {   "id" : id,
                    "province" : province,
                    "city" : city,
                    "district" : district,
                    "detailedadd" : detailedadd,
                    "consignee" : consignee,
                    "tel" : tel,
                    "defaultadd" : defaultadd,
                    "userId" : '${frontUser.username}'
                },
                function (data) {
                    if (data==""){
                        $(window).attr("location","${ctx}/front/address/goDeliverAddress");
                    }else{
                        alert(data);
                    }
                })

            return false;
        })

    })
</script>
</body>
</html>
